<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算距离</title>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=feOy08GjBOLC83Ty77FIO4TdGQPhU3uO"></script>
		<style type="text/css">
	       #container{
	           width: 782px;
	           height: 440px;
           	   overflow: hidden;
	       }
	       .layui-form-item {
			    margin-bottom: 0;
			}
			.layui-form-item {
			    clear: both;
			}
			.layui-inline {
			    margin-bottom: 5px;
			    margin-right: 10px;
			}
			.layui-inline {
			    vertical-align: middle;
			}
			.layui-inline {
			    position: relative;
			}
			.layui-inline {
			    display: inline-block;
			}
			.layui-input {
			    display: block;
			    width: 100%;
			    padding-left: 10px;
			}
			.layui-input {
			    height: 32px;
			    line-height: 1.3;
			    border-width: 1px;
			    border-style: solid;
			    background-color: #fff;
			    border-radius: 2px;
			}
			.layui-btn {
				margin-left: 10px;
			    transition: none;
			}
			.layui-btn {
			    display: inline-block;
			    height: 32px;
			    line-height: 32px;
			    background-color: #009688;
			    color: #fff;
			    white-space: nowrap;
			    text-align: center;
			    font-size: 12px;
			    border: none;
			    border-radius: 2px;
			    cursor: pointer;
			}
			.layui-field-title {
			    border-width: 1px 0 0;
			}

			.layui-elem-field {
			    padding: 0;
			    border-style: solid;
			}
			fieldset {
			    display: block;
			    margin-inline-start: 2px;
			    margin-inline-end: 2px;
			    padding-block-start: 0.35em;
			    padding-inline-start: 0.75em;
			    padding-inline-end: 0.75em;
			    padding-block-end: 0.625em;
			    min-inline-size: min-content;
			}
			.layui-elem-field legend {
			    margin-left: 20px;
			    padding: 0 10px;
			    font-size: 12px;
			    font-weight: 600;
			}
			legend {
			    display: block;
			    padding-inline-start: 2px;
			    padding-inline-end: 2px;
			    border-width: initial;
			    border-style: none;
			    border-color: initial;
			    border-image: initial;
			}
		</style>
	</head>
	<body>
                        <div class="layui-form-item">
				            <div class="layui-inline">
				                <input id="kilometer" class="layui-input" type="text" placeholder="输入公里数"/>
				            </div>
				            <div class="layui-inline">
				                <button id="confirm" type="button" class="layui-btn" onclick="confirm()">确定</button>
				            </div>
				            <div class="layui-inline">
				                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;margin: 10px 0 0px;">
							    	<legend>公里数：<span id="kilometerts">0</span></legend>
							  	</fieldset>
				            </div>
				            <div class="layui-inline">
				                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;margin: 10px 0 0px;">
							    	<legend>时间：<span id="timetongxing">0</span>分钟</legend>
							  	</fieldset>
				            </div>
                        </div>
        <div id='container'></div>
	</body>
	<script type="text/javascript">
		// 获取 URL 参数的函数
		function getUrlParam(name) {
			// 利用正则表达式获取 URL 参数的值
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) {
				return unescape(r[2]);
			} else {
				return null;
			}
		};
	    function GetUrlByParamName(name){
	        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
	        var URL =  decodeURI(window.location.search);
	        var r = URL.substr(1).match(reg);
	        if(r!=null){
	            //decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码
	            return  decodeURI(r[2]);
	        };
	        return null;
	    };

		// 获取 URL 参数中的经纬度和公里数
		var set_longitude = GetUrlByParamName("set_longitude");
		var set_latitude = GetUrlByParamName("set_latitude");
		// 如果发货地址经纬度不存在，弹出警告
		if(set_longitude == null || set_longitude == ''){
			alert('计算失败！发货地址经纬度不存在！');
		}

		var get_longitude = GetUrlByParamName("get_longitude");
		var get_latitude = GetUrlByParamName("get_latitude");
		// 如果收货地址经纬度不存在，弹出警告
		if(get_longitude == null || get_longitude == ''){
			alert('计算失败！收货地址经纬度不存在！');
		}

		var kilometer = GetUrlByParamName("kilometer");
		// 设置输入框的值为从 URL 参数获取的公里数
		$("#kilometer").val(kilometer)

		// 初始化百度地图
		var map = new BMapGL.Map('container');
		map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
		map.centerAndZoom(new BMapGL.Point(116.331398,39.897445), 12); // 设置地图中心点和缩放级别

		// 定义 searchComplete 函数，用于处理路线搜索结果
		var searchComplete = function (results){
			if (transit.getStatus() != BMAP_STATUS_SUCCESS){
				return ;
			}
			var plan = results.getPlan(0);
			// 获取距离（单位：公里），并更新到页面上
			$("#kilometer").val(plan.getDistance(true).replace("公里",""));
			$("#kilometerts").text(plan.getDistance(true));
			// 获取预计时间（单位：分钟），并更新到页面上
			$("#timetongxing").text(plan.getDuration(true));
		}
		// 创建驾车路线搜索对象
		var transit = new BMapGL.DrivingRoute(map, {
			renderOptions: {map: map},
			onSearchComplete: searchComplete // 搜索完成后调用 searchComplete 函数
		});
		// 设置起点和终点坐标
		var start=new BMapGL.Point(set_longitude,set_latitude);
		var end=new BMapGL.Point(get_longitude,get_latitude);
		// 执行路线搜索
		transit.search(start, end);

		// 确定按钮的事件处理函数
		function confirm(){
			// 将用户输入的公里数存储到父页面的 BasicAddressInfoDlg 对象中
			parent.BasicAddressInfoDlg.data.kilometer = $("#kilometer").val();
			var Index = parent.layer.getFrameIndex(window.name); // 获取当前页面的索引
			parent.layer.close(Index); // 关闭当前页面
		}

		// 返回按钮的事件处理函数
		function backupPage(){
			var Index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(Index);
		}
	</script>
</html>
